<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-aside width="201px; height:100%">
        <el-col :span="12" style="height: 100%">
          <el-menu
            :default-active="routePath"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 100%"
            :router="true"
          >
            <el-submenu index="1" style="height: 100%">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>管理员</span>
              </template>
              <el-menu-item index="/controller/course">课程列表</el-menu-item>
              <el-menu-item index="/controller/teacherList">教师列表</el-menu-item>
              <el-menu-item index="/controller/studentApply">学生申请</el-menu-item>
              <el-menu-item index="/controller/dormitory">宿舍分配</el-menu-item>
              <el-menu-item index="/controller/studentFiles">学生档案</el-menu-item>
              <el-menu-item @click="loginOut">退出登录</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { courses } from "../../../public/schoolData.js";
export default {
  name: "controller",
  data() {
    return {
      date: courses,
      routePath: "/controller/course",
    };
  },
  created() {
    if (this.$route.path == "/controller") {
      this.routePath = "/controller/course";
    } else {
      this.routePath = this.$route.path;
    }
    if (!sessionStorage.getItem("controllerInfo")) {
      this.$router.push("/controllerLogin");
      this.$message.error("没有权限");
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    loginOut() {
      sessionStorage.removeItem("controllerInfo");
      this.$router.push("/controllerLogin");
    },
  },
};
</script>

<style scoped>
html,
body {
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100%;
}
</style>